<template>
  <div>
   <Header>
	<div class="title"><span class="title-span">注册</span></div>
	<div class="back" @click="$router.back()"><van-icon name="arrow-left" /></div>
	</Header>

<h3 class="nav-h3">关键时刻，莫迪受重挫</h3>

<div class="container">
    <van-cell class="container-info">
        <div class="name"> 作者</div>
        <div class="time">2021-12-2
        </div>
        <van-image
            round
            width="3rem"
            height="3rem"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
        <button class="info-b">关注</button>
    </van-cell>
</div>
<p class="info-p">
    在新冠疫情肆虐的印度，总理莫迪面临新的政治麻烦。 据英国《卫报》报道，
    印度总理莫迪在关键的西孟加拉邦选举中遭遇罕见的政治失败。有迹象表明选
    民对他处理新冠疫情的做法不满。报道称，疫情期间缩短投票时间，并将选举活
    动转到网上，但由印度人民党控制的选举委员会拒绝了该提议。在首府加尔各答，
    一些实验室称，检测结果显示新冠阳性比例高达50%。 莫迪未能夺取孟加拉，原因
    跟他处理疫情不力有关。当天，专栏作家斯瓦迪查图尔维第在新德里电视台网站撰文
    评论:“印人党并非一股不可阻挡的力量。。"
</p>

<div class="container-2">
    <van-cell class="container-info2">
        <div class="name-2">小张</div>
        <h3 class="info-2">不错</h3>
        <div class="time-2">2021-12-2
            <span class="span-2">3 &nbsp;回复</span>
        </div>
        <van-image
            round
            width="3rem"
            height="3rem"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
            <van-icon class="good" name="good-job-o" />
    </van-cell>
</div>

 <div class="cell-footer">
    <van-cell class="footer">
        <span class="footer-span">写评论</span>
      <span class="footer-info">
        <van-icon name="comment-o" />&nbsp;&nbsp;&nbsp;
        <van-icon class="img-2" name="star-o" />&nbsp;&nbsp;&nbsp;
        <van-icon name="good-job-o" />&nbsp;&nbsp;&nbsp;
        <van-icon name="share-o" />
      </span>

    </van-cell>
  </div>

  </div>

</template>

<script>
import { NavBar,Cell,Image as VanImage,Icon } from 'vant';
console.log(NavBar);
console.log(Cell);
console.log(VanImage);
console.log(Icon)

export default {
    components:{
        [NavBar.name]:NavBar,
        [Cell.name]:Cell,
        [VanImage.name]:VanImage,
        [Icon.name]:Icon
    },
    methods: {
    onClickLeft() {
      Toast('返回');
    },
  },
}
</script>

<style lang="less">
.title {
  text-align: center;
  background-color: green;
  height: 45px;
}
.title-span{
  font-size: 20px;
  top: -25px;
  color: white;
  position: absolute;
  margin-top: 30px;
  right: 170px;
}
.back {
  position: absolute;
  margin-top: -30px;
  left: 10px;
}
.nav-bar {
    background-color: green;
}
.nav-h3 {
   position: absolute;
   right: 170px;
   font-size: 18px;
   color: rgb(43, 41, 39);
}
.container-info {
    margin-top: 50px;
    .info-b {
        float: right;
        margin-top: 10px;
    }
    .name {
        position: absolute;
        right: 260px;
    }.time {
        position: absolute;
        right: 225px;
        margin-top: 25px;
    }
    
}
.info-p {
    font-size: 18px;
    color: rgb(44, 43, 43);
    // width: 360px;
    right: 20px;
    margin-top: 3px;
}
.container-info2 {
    .info-b2 {
        float: right;
        margin-top: 10px;
    }
    .name-2 {
        position: absolute;
        right: 255px;
        color: red;
        margin-top: -6px;
    }.time-2 {
        position: absolute;
        right: 218px;
        margin-top: 32px;
    }
    .info-2 {
        position: absolute;
        right: 250px;
        margin-top: 14px;
    }
    .span-2 {
        position: absolute;
        right: -60px;
        margin-top: -3px;
        border: 1px solid #999;
        border-radius: 8px;
    }
    .good {
        float: right;
        margin-top: 20px;
    }
}
.cell-footer {
    margin-top: 66px;
    border: 1px solid;
    .footer-span{
       border: 1px solid #999;
       width: 180px;
       position: absolute;
       text-align: center;
       border-radius: 7px; 
       margin-top: 1px;
    }
    .footer-info {
        float: right;
        margin-top: 5px;

    }
}



</style>